<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/basic.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/detail.css">
</head>

<body>
    <!-- 头部 -->
    <div class="importHeard"></div>
    <!-- 头部 -->

    <!-- 导航 -->
    <div class="nav">
        <div class="main">
            <div class="nav-x">
                <div class="navMain">
                    <span class="iconfont">&#xe63a;</span>
                    全部商品分类
                </div>
                <span>购物优惠券</span>
                <span>商品畅销榜</span>
                <span>新品热卖榜</span>
                <span>卧室</span>
                <span>客厅</span>
                <span>餐厅</span>
                <span>书房</span>
                <span>儿童房</span>
                <span>办公家具</span>
            </div>
            <div class="nav-t">
                <ul class="clearfix">
                    <li><a href="#">实木床敬木轩</a></li>
                    <li><a href="#">中式床庆恩</a></li>
                    <li><a href="#">欧式床沐晨</a></li>
                    <li><a href="#">翻盖梳妆台庆恩</a></li>
                    <li><a href="#">拉门衣柜全友</a></li>
                    <li><a href="#">美式床头柜百冠</a></li>
                    <li><a href="#">长餐桌蓓影</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 导航 -->

    <!-- 类别 -->
    <p class="include main">
        <span>卧室</span>
        <span>&gt;</span>
        <span>床</span>
        <span>&gt;</span>
        <span>实木床</span>
    </p>
    <!-- 类别 -->

    <!-- 主要内容 -->
    <div class="detail main clearfix">
        <!-- 左边 -->
        <div class="detail-left">
            <div class="hotact">
                <div class="hottitle">
                    热门活动
                </div>
                <div class="hotcont">
                    <ul>
                        <li><a href="#">【热门】 活动家具推荐</a></li>
                        <li><a href="#">【热门】你的舒适时光</a></li>
                        <li><a href="#">【热门】和风 日式家居</a></li>
                    </ul>
                    <img src="./imgs/u=2794414266,381252703&fm=26&gp=0.jpg" alt="">
                    <img src="./imgs/u=1892958189,1909854829&fm=26&gp=0.jpg" alt="">
                    <img src="./imgs/u=2545737891,2832845474&fm=26&gp=0.jpg" alt="">
                </div>
            </div>
            <div class="another">
                <div class="another-title">
                    该店铺的其他商品
                </div>
                <div class="another-cont">
                    <div class="ano-book">
                        <div>
                            <img src="" alt="">
                        </div>
                        <p><a href="#">好家具</a></p>
                        <span>木韵价:</span>
                        <b>￥50.20</b>
                    </div>
                    <div class="ano-more">
                        <p><a href="#">更多&gt;&gt;</a></p>
                    </div>
                </div>
            </div>
            <div class="det-history">
                <div class="det-history-title">
                    你的最近浏览记录
                </div>
                <div class="det-history-cont">
                    <div class="det-book">
                        <div>
                            <img src="" alt="">
                        </div>
                        <p><a href="#">好家具</a></p>
                        <span>木韵价:</span>
                        <b>￥50.20</b>
                    </div>
                    <p class="det-p">
                        <a href="#">* 家具</a>
                    </p>
                    <p class="det-p">
                        <a href="#">* 家具</a>
                    </p>
                </div>
            </div>
        </div>
        <!-- 右边 -->
        <div class="detail-right">

            <div class="r-top">
                            <!-- 原图 -->
            <div class="ori">
                <img src="" alt="">
                <!-- 滤镜 -->
                <div class="fil">

                </div>
            </div>
            <!-- 放大区 -->
            <div class="large">
                <img src="" alt="">
            </div>

            <div class="right-r">
                <!-- 购物模板 -->
                <div class="shopmod">
                    <div class="bname">
                        <h1>好家具</h1>
                        <h3></h3>
                        <h3>企业采购卡&服务电话 028-83157118（法定工作日9:00-17:00）</h3>
                    </div>

                    <!-- 书属性 -->
                    <div class="battr">
                        <dl class="price-o">
                            <dt class="attr-title">定　　价 ：</dt>
                            <dd>
                                <b>￥120.00</b>
                            </dd>
                        </dl>
                        <dl class="price-n">
                            <dt class="attr-title">木 韵 价 ：</dt>
                            <dd>
                                <b>￥31.20</b>
                            </dd>
                        </dl>
                        <dl class="author">
                            <dt class="attr-title">作　　者 ：</dt>
                            <dd>
                                <a href="#" style="color:#1D66B2">罗自国</a>
                            </dd>
                        </dl>
                        <dl class="class">
                            <dt class="attr-title">所属分类 ：</dt>
                            <dd>
                                <a target='_blank' class='link3' href='#'>卧室</a>
                                > <a target='_blank' class='link3' href='#'>床</a>
                                > <a target='_blank' class='link3' href='#'>实木床</a>
                            </dd>
                        </dl>
                        <dl class="sale">
                            <dt class="attr-title">促销活动 ：</dt>
                            <dd>
                                <span class="status">❤木韵购物节</span>
                            </dd>
                            <dd>
                                <span class="status">
                                    ❤老客户回馈，积分换礼券，购物更实惠<br />❤大陆非新疆西藏地区包邮，新疆西藏运费每单20元
                                </span>
                                <a class="link" href="#">详情 &gt;&gt;</a>
                            </dd>
                        </dl>
                    </div>
                    <!-- 书属性 -->

                </div>

                <!-- 加入购物车 -->
                <div class="addtocar clearfix">
                    <dl class="buy-num">
                        <dt class="attr-title">购买数量 ：</dt>
                        <dd>
                            <span class="buy-num-active">
                                <a href="javascript:void(0);" class="reduce-btn" bind="reduce" title="减少">
                                    -
                                </a>
                                <input type="text" class="buy-num-text" value="1">
                                <a href="javascript:void(0);" class="add-btn" bind="increase" title="增加">
                                    +
                                </a>
                            </span> 件
                        </dd>
                    </dl>
                    <dl class="buy-active">
                        <dd>
                            <a href="#">
                            </a>
                            <div class="coll"><p>☆</p><p>收藏</p></div>
                        </dd>
                    </dl>
                    <dl class="buy-service">
                        <dt class="attr-title">服　　务 ：</dt>
                        <dd>
                            <span>由"木之韵"直接销售和发货，并提供售后服务</span>
                        </dd>
                        <dd>
                            <span class="character">
                                <a href="#" title="正品低价" target="_blank">正品低价</a> |
                                <a href="#" title="闪电发货" target="_blank">闪电发货</a> |
                                <a href="#" title="货到付款" target="_blank">货到付款</a> |
                                <a href="#" title="高效退换货" target="_blank">高效退换货</a></span></dd>
                    </dl>
                </div>
                <!-- 加入购物车 -->




            </div>
            </div>
            <!-- 商品介绍 -->
            <div class="intro clearfix">
                <div class="intro-head">
                    <div class="intro-tab">
                        <div class="tab-intro act">
                            <a href="#">商品介绍</a><s></s>
                        </div>
                    </div>
                    <div class="intro-b">
                        <div class="intro-b1">
                            <span class="intro-btitle">快速直达</span>
                            <a href="#">目录</a>
                            <a href="#">主编推荐</a>
                            <a href="#">内容简介</a>
                        </div>
                    </div>
                </div>
                <div class="intro-cont">
                    <ul>

                    </ul>
                </div>
                <div class="intro-head">
                    <div class="intro-tab">
                        <div class="tab-say act">
                            <a href="#">商品评论</a>
                            <a class="link" href="#" target="_blank">(0条)</a><s></s>
                        </div>
                    </div>
                    <div class="intro-bb">
                        <div class="intro-b1">
                            <div class="pi1">我要评价</div>
                            <div class="pi2">
                                <b index='0'>☆</b>
                                <b index='1'>☆</b>
                                <b index='2'>☆</b>
                                <b index='3'>☆</b>
                                <b index='4'>☆</b>
                            </div>
                            <textarea class="pingjia" placeholder="在此输入评价"></textarea>
                            <button class="ti">提交</button>
                        </div>
                    </div>
                </div>
                <div class="intro-cont1">
                    <ul>
                        <li>
                            暂无商品相关评价
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 商品介绍 -->
        </div>
    </div>
    <!-- 主要内容 -->

    <!-- 回到顶部 -->
    <div class="totop">
        <img src="./imgs/topin.jpg" alt="">
    </div>
    <!-- 回到顶部 -->

    <!-- 和商家交流 -->
    <a href="" class="toshop">
        <img src="./imgs/624c6aab5a2a20fdc37a7b8305a38983.jpeg" alt="">
    </a>
    <!-- 和商家交流 -->

    <!-- 底部 -->
    <div class="importFooter"></div>
    <!-- 底部 -->
</body>
<script src="./js/lib/jquery-1.8.3.js"></script>
<script src="./js/loginArea.js" type="module"></script>
<script src="./js/footer.js" type="module"></script>
<script src="./js/detail.js" type="module"></script>

</html>